<template>
	<view>
		<view style="background-color: #007aff;">
			<view class="header-nav">
				<view style="font-weight: bold;">生态圈集团</view>
				<view style="margin-top: 12upx;">
					<view class="Recharge-btn">充值</view>
				</view>
			</view>

			<view style="height:324upx;">
				<view class="advertising-currency">
					<view class="currency-row" style="line-height:80upx;">
						<view style="font-size: 32upx;">广告币</view>
						<uni-icon type="eye" size="52"  color="#000000" @tap="showMoney"></uni-icon>
					</view>

					<view v-if="isShow" class="currency-moneny">6934.89</view>
					<view v-else class="currency-moneny">****</view>

					<view style="font-size: 28upx;height:60upx;line-height:60upx;">赠币</view>
					<view class="currency-row">
						<view class="currency-moneny">934.89</view>
						<view style="font-size: 28upx;">
							<uni-icon type="compose" size="52"></uni-icon>记录
						</view>
					</view>

				</view>
			</view>

		</view>

		<view style="margin:20upx;">
			<view class="consumption-btn" style="margin-left:0">
				<view class="consumption-title">播放消耗</view>
				<view class="consumption-money">934.89</view>
			</view>

			<view class="consumption-btn">
				<view class="consumption-title">优惠卷消费</view>
				<view class="consumption-money">934.89</view>
			</view>

			<view class="consumption-btn">
				<view class="consumption-title">订单转化</view>
				<view class="consumption-money">934.89</view>
			</view>
			<view style="clear: both"></view>
		</view>


		<view class="jump-box">
			<view class="jump-row" style="border-bottom: 1px solid #eeeeee;">
				<view>交易记录</view>
				<view class="jump-right" >收支明细&nbsp;推广收益<uni-icon type="arrowright" color="#999999" size="36"></uni-icon></view>
			</view>
			<view class="jump-row">
				<view>整体概括</view>
				<view class="jump-right" >播放记录<uni-icon type="arrowright" color="#999999" size="36"></uni-icon></view>
			</view>
		</view>

		<view class="jump-box" style="margin-top: 20upx;">
			<view class="jump-row" style="border-bottom: 1px solid #eeeeee;">
				<view>认证设置</view>
				<view class="jump-right" >认证信息&nbsp;支付设置<uni-icon type="arrowright" color="#999999" size="36"></uni-icon></view>
			</view>
			<view class="jump-row">
				<view>账户设置</view>
				<view class="jump-right" >基础信息&nbsp;密码设置<uni-icon type="arrowright" color="#999999" size="36"></uni-icon></view>
			</view>
		</view>
	



	</view>


</template>

<script>
	// import socket from 'plus-websocket';
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				currencyMoneny:6934.89,
				isShow:true
			

			}
		},
		created() {
			// var adMasterIndexPath = {
			// 		 // 视频播放报表 列表页
			// 		 company: "STQ",
			// 		 api: "pc_videoPlayData_index",
			// 		 version: "1.0",
			// 		 data:{
			// 				status:"2",
			// 				}
			// 			 }
			// socket.sendSocketMessage({
			//       data: JSON.stringify(adMasterIndexPath)
			//   });
			//   
			//   socket.onSocketMessage(function (res) {
			//   		console.log('收到返回内容：' );
			//   		console.log( JSON.parse(res.data))
			//   		 
			//   		});

		},
		onLoad() {

		},
		methods:{
			showMoney(){
				this.isShow=!this.isShow
				
			}

		}

	}
</script>

<style>
	page {
		background-color: lightgray;
	}

	.header-nav {

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* width: 100%; */
		height: 80upx;
		line-height: 80upx;
		font-size: 36upx;
		color: #ffffff;
		padding: 0 20upx;

	}

	.Recharge-btn {
		background-color: orange;
		font-size: 28upx;
		color: #ffffff;
		border-radius: 12upx;
		width: 140upx;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
	}

	.advertising-currency {
		border: 1px solid #999999;
		border-radius: 12upx;
		background-color: #ffffff;
		margin: 30upx 20upx;
		padding: 0 20upx;
	}

	.currency-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 80upx;
	}

	.currency-moneny {
		color: #007aff;
		font-size: 52upx;

	}
	.consumption-btn{
		border-radius: 12upx;
		background-color: #ffffff;
		float:left;
		margin-left:20upx;
		width:222upx;
	}
	.consumption-title{
		font-size: 28upx;
		height:70upx;
		line-height:70upx;
		margin-left:20upx;
	}
	.consumption-money{
		color: #007aff;
		font-size: 52upx;
		height:88upx;
		margin-left:20upx;
	}
	.jump-box{
		background-color: #ffffff;
		padding-left:20upx;
	}
	.jump-row{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 100upx;
		line-height: 100upx;
		font-size:32upx;
	}
	.jump-right{
		margin-right: 20upx;
		color:#999999;
		font-size:28upx;
	}
</style>